@charset "utf-8";
@function p($px){
    @return $px/2+px;
}
.menu{
    position: fixed;
    bottom: p(67);
    z-index: 1;
    width: 100%;
    padding: 0;
    li{
        width: p(171);
        height: p(70);
        margin: 0 auto;
        list-style: none;
        img{
            width: 100%;
        }
    }
}
.indexMobile{
//  首页
    .section1{
        background: url(../img/shouye14.png)no-repeat;
        background-size: cover;
        overflow: hidden;
        .logo{
            width: p(103);
            height: p(38);
            margin-top: p(44);
            margin-left: p(44);
            img{
                width: 100%;
            }
        }
        .title{
            margin-top: p(79);
            display: flex;
            flex-direction: column;
            align-items: center;
            img:nth-child(1){
                width: p(381);
                position: relative;
                z-index: 1;
            }
            img:nth-child(2){
                width: p(576);
                position: relative;
                top: p(-20);
                
            }
            img:nth-child(3){
                width: p(352);
                position: relative;
                top: p(-20);
            }
            img:nth-child(4){
                width: p(341);
                position: relative;
                top: p(-10);
            }
            
        }
        .logo2{
            width: p(322);
            margin: 0 auto;
            margin-top: p(50);
            animation-name: renwu;
            animation-duration: 5s;
            animation-fill-mode: forwards;
            img{
                width: 100%;
            }
        }
//      四个动的云
        .yun{
            position: relative;
            img{
                position: absolute;
                right: -100%;
                animation-name: yundong;
                animation-duration: 50s;
                animation-iteration-count: infinite;
            }
            img:nth-child(1){
                width: p(35);
                height: p(25);
                animation-duration: 50s;
                top: p(-360);
            }
            img:nth-child(2){
                width: p(40);
                height: p(25);
                animation-duration: 40s;
                top: p(-374);
            }
            img:nth-child(3){
                width: p(56);
                height: p(43);
                animation-duration: 35s;
                top: p(-444);
            }
            img:nth-child(4){
                width: p(60);
                height: p(40);
                animation-duration: 25s;
                top: p(-576);
            }
        }
//      不动的云
        .yun1{
            position: absolute;
            top: p(400);
            animation-name: yundong2;
            animation-duration: 30s;
            animation-iteration-count: infinite;
            img{
                width: p(76);
                height: p(56);
            }
        }
//      月亮
        .yue{
            img:nth-child(1){
                width: p(222);
                position: absolute;
                top: p(444);
                right: p(64);
                animation-name: yue;
                animation-duration: 0.01s;
                animation-iteration-count: infinite;
            }
            img:nth-child(2){
                width: p(90);
                position: absolute;
                top: p(510);
                right: p(130);
            }
        }
//      文字泡
        .pao{
            img{
                animation-name: wenzipao;
                animation-duration: 3s;
                animation-delay: 2s;
            }
            img:nth-child(1){
                position: absolute;
                top: p(612);
                left: p(50);
                width: p(95);
                height: p(69);
                animation-delay: 3s;
            }
            img:nth-child(2){
                position: absolute;
                top: p(626);
                right: p(30);
                width: p(150);
                height: p(85);
            }
            img:nth-child(3){
                position: absolute;
                top: p(860);
                left: p(50);
                width: p(128);
                height: p(77);
                animation-delay: 4s;
            }
            img:nth-child(4){
                position: absolute;
                top: p(860);
                right: p(60);
                width: p(95);
                height: p(56);
                animation-delay: 5s;
            }
        }
    }

//  问题页
    .question{
        .slide{
            background: url(../img/neiye1.png)no-repeat;
            background-size: cover;
            overflow: hidden;
            .slide1{
                width: 85%;
                margin: 0 auto;
                position: relative;
//              返回首页按钮
                a{
                    display: block;
                    width: p(80);
                    height: p(50);
                    background: skyblue;
                    color: #fff;
                    border-radius: 6px;
                    margin-top: p(40);
                    font-size: p(30);
                    text-align: center;
                    text-decoration: blink;
                }
//              问题
                h1{
                    font-size: p(33);
                    color: #fff;
                }
//              问题图片
                .tupian{
                    width: p(250);
                    margin: 0 auto;
                    img{
                        width: p(250);
                    }
                }
//              四个动的云
                .slide1_yun{
                    position: relative;
                    img{
                        position: absolute;
                        right: -100%;
                        animation-name: yundong;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(1){
                        animation-duration: 50s;
                    }
                    img:nth-child(2){
                        animation-duration: 40s;
                        top: p(-120);
                    }
                    img:nth-child(3){
                        animation-duration: 35s;
                    }
                    img:nth-child(4){
                        animation-duration: 25s;
                    }
                }
//              选择答案
                .slide1_wenti{
//                  答案选项
                    p{
                        width: p(370);
                        height: p(60);
                        background: url(../img/neiye10.png)no-repeat;
                        background-size: cover;
                        overflow: hidden;
                        font-size: p(28);
                        padding-left: p(40);
                        padding-top: p(10);
                    }
                    p:nth-child(1){
                        margin-top: p(140);
                    }
                    p:hover{
                        background: url(../img/neiye11.png)no-repeat;
                        background-size: cover;
                    }
                    p:nth-child(1):hover{
                        background: url(../img/neiye9.png)no-repeat;
                        background-size: cover;
                    }
                }
//              第二题的选择题选项
                .slide1_wenti2{
                    p:nth-child(1):hover{
                        background: url(../img/neiye11.png)no-repeat;
                        background-size: cover;
                    }
                    p:nth-child(3):hover{
                        background: url(../img/neiye9.png)no-repeat;
                        background-size: cover;
                    }
                }
//              第三题的选择题选项
                .tupian3{
                    width: p(374);
                    img{
                        width: 100%;
                    }
                }
                .slide1_wenti3{
                    p:nth-child(1):hover{
                        background: url(../img/neiye11.png)no-repeat;
                        background-size: cover;
                    }
                    p:nth-child(2):hover{
                        background: url(../img/neiye9.png)no-repeat;
                        background-size: cover;
                    }
                }
//              第四题的修改
                .tupian4{
                    margin-top: p(116);
                }
//              第七题的修改
                .slide1_wenti4{
                    p:nth-child(1):hover{
                        background: url(../img/neiye11.png)no-repeat;
                        background-size: cover;
                    }
                    p:nth-child(4):hover{
                        background: url(../img/neiye9.png)no-repeat;
                        background-size: cover;
                    }
                }
//              第14题的修改
                .slide_14{
                    p:nth-child(1){
                        margin-top: p(80);
                    }
                }
                
                
//              坑爹狗
                .kengdie{
                    width: p(83);
                    position: absolute;
                    bottom: p(-40);
                    left: p(450);
                    z-index: 1;
                    img{
                        width: 100%;
                    }
                }
//              音符
                .yinfu{
                    img{
                        position: absolute;
                        left: p(470);
                        animation-name: yinfu;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(1){
                        width: p(54);
                        animation-duration: 3s;
                    }
                    img:nth-child(2){
                        width: p(33);
                        animation-duration: 3.5s;
                    }
                    img:nth-child(3){
                        width: p(33);
                        animation-duration: 4s;
                    }
                    img:nth-child(4){
                        width: p(33);
                        animation-duration: 4.5s;
                    }
                    img:nth-child(5){
                        width: p(33);
                        animation-duration: 5s;
                    }
                }
            }
//          测试结果
            .slide2{
                position: relative;
                .logo1{
                    width: p(103);
                    height: p(38);
                    margin-top: p(44);
                    margin-left: p(44);
                    img{
                        width: 100%;
                    }
                }
                .logo2{
                    width: p(534);
                    position: absolute;
                    top: p(100);
                    right: -100%;
                    animation-name: logo2;
                    animation-duration: 5s;
                    animation-fill-mode: forwards;
                    img{
                        width: 100%;
                    }
                }
                .logo3{
                    width: p(246);
                    position: absolute;
                    top: p(710);
                    left: -100%;
                    animation-name: logo3;
                    animation-duration: 5s;
                    animation-fill-mode: forwards;
                    animation-delay: 1s;
                    img{
                        width: 100%;
                    }
                }
                .logo4{
                    width: p(240);
                    position: absolute;
                    top: p(200);
                    left: p(186);
                    img{
                        width: 100%;
                    }
                }
                .logo5{
                    width: p(400);
                    top: p(320);
                    left: p(114);
                }
                .logo6{
                    width: p(196);
                    top: p(800);
                    left: p(320);
                }
            }
            .slide3{
                position: relative;
                .logo7{
                    width: p(177);
                    margin: 0 auto;
                    margin-top: p(120);
                    img{
                        width: 100%;
                    }
                }
                .logo8{
                    width: p(477);
                    margin: 0 auto;
                    img{
                        width: 100%;
                    }
                }
                .logo9{
                    width: p(306);
                    margin-left: p(39);
                    margin-top: p(94);
                    img{
                        width: 100%;
                    }
                }
                .logo10{
                    width: p(171);
                    position: absolute;
                    top: p(420);
                    right: p(70);
                    animation-name: haoyou;
                    animation-duration: 3s;
                    animation-iteration-count: infinite;
                    img{
                        width: 100%;
                    }
                }
                .logo11{
                    top: p(520);
                    right: p(240);
                    animation-delay: 1s;
                }
                .logo12{
                    top: p(570);
                    right: p(70);
                    animation-delay: 2s;
                }
                .logo13{
                    top: p(468);
                    left: p(58);
                    animation-delay: 1s;
                }
                .logo14{
                    width: p(480);
                    margin: 0 auto;
                    margin-top: p(240);
                    img{
                        width: 100%;
                    }
                }
                .slide3_input{
                    width: p(500);
                    margin: 0 auto;
                    input{
                        width: 100%;
                        height: p(75);
                        border: 1px solid #fff;
                        background: transparent;
                        color: #fff;
                        padding: 5px;
                    }
                }
                .logo15{
                    margin: p(20) 0 0 p(190);
                    img{
                        width: p(140);
                    }
                }
            }
//          遮罩
            .zhezhao{
                width: 100%;
                height: 100%;
                background: gray;
                position: absolute;
                top: 0;
                background-color: rgba(0,0,0,0.6);
                transform: translateY(0);
                transition: 1s;
                .zhezhao1{
                    width: p(165);
                    margin-left: p(240);
                    margin-top: p(260);
                    img{
                        width: 100%;
                    }
                }
                .zhezhao2{
                    width: p(440);
                    margin-left: p(100);
                    margin-top: p(42);
                    img{
                        width: 100%;
                    }
                }
            }
//          查看评价页面
            .slide4{
                position: relative;
                .pin1{
                    width: p(260);
                }
                .pin2{
                    margin: p(30) auto;
                }
                .pin3{
                    width: 100%;
                    img{
                        position: absolute;
                        bottom: p(-340);
                        width: 100%;
                    }
                }
            }
        }
    }
       
}
.fp-controlArrow{
    display: none !important;
}



@media only screen and (min-width:375px){
    .indexMobile{
        .section1{
            .logo{
                width: p(120);
            }
            .title{
                img:nth-child(1){
                    width: p(400);
                }
                img:nth-child(2){
                    width: p(600);
                }
                img:nth-child(3){
                    width: p(380);
                }
                img:nth-child(4){
                    width: p(370);
                }
            }
            .logo2{
                width: p(460);
            }
            .pao{
                img:nth-child(1){
                    top: p(692);
                }
                img:nth-child(2){
                    top: p(706);
                }
                img:nth-child(3){
                    top: p(1042);
                }
                img:nth-child(4){
                    top: p(1030);
                }
            }
        }
    }
}
@media only screen and (min-width:414px){
    .indexMobile{
        .section1{
            .logo{
                width: p(150);
            }
            .title{
                img:nth-child(1){
                    width: p(430);
                }
                img:nth-child(2){
                    width: p(630);
                }
                img:nth-child(3){
                    width: p(420);
                }
                img:nth-child(4){
                    width: p(400);
                }
            }
            .logo2{
                width: p(560);
            }
            .pao{
                img:nth-child(1){
                    top: p(716);
                }
                img:nth-child(2){
                    top: p(734);
                }
                img:nth-child(3){
                    top: p(1180);
                }
                img:nth-child(4){
                    top: p(1166);
                }
            }
        }
    }
}
//人物的动画
@keyframes renwu{
    0%{
        transform: translateY(-300%);
        opacity: 0;
    }
    50%{
        transform: translateY(8%);
        opacity: 1;
    }
    80%{
        transform: translateY(-0.5%);
        opacity: 1;
    }
    100%{
        transform: translateY(2%);
        opacity: 1;
    }
}
//飞来飞去云的动画
@keyframes yundong{
    0%{
        right: -50%;
        opacity: 1;
    }
    99%{
        right: 100%;
        opacity: 0;
    }
    100%{
        opacity: 0;
        right: -20%;
    }
}
//不动云动画
@keyframes yundong2{
    0%{
        opacity: 1;
    }
    50%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
//月亮动画
@keyframes yue{
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.2);
    }
    100%{
        transform: scale(1);
    }
}
//文字泡
@keyframes wenzipao{
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(2);
    }
    100%{
        transform: scale(1);
    }
}
//音符动画
@keyframes yinfu{
    0%{
        opacity: 1;
        top: 95%;
    }
    100%{
        opacity: 0;
        top: 50%;
    }
}
//测试页背景板
@keyframes logo2{
    0%{
        right: -50%;
    }
    100%{
        right: 8%;
    }
}
//测试页人物
@keyframes logo3{
    0%{
        left: -50%;
    }
    100%{
        left: 15%;
    }
}
//好友评价页动画
@keyframes haoyou{
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.1);
    }
    100%{
        transform: scale(1);
    }
}
//遮罩
#check{
    display: none;
}
#check:checked ~ .zhezhao{
    transform: translateY(-100%);
}
#check1{
    display: none;
}
#check1:checked ~ .zhezhao4{
    transform: translateY(-100%);
}
